<!DOCTYPE html>
<html>
<head>
    <title>医院门诊系统</title>
    <!-- 避免中文乱码 -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<script type="text/javascript">
    $(document).ready(function (){
        //进入页面时加载病例库数据
        $.ajax({
            url:"showprescribe",
            type:'GET',
            dataType:'json',
            success:function (data){
                for(let i=0;i<data.length;i++){
                    var p_idTd=$("<td></td>").append(data[i].id);
                    var c_idTd=$("<td></td>").append(data[i].case_id);
                    var m_idTd=$("<td></td>").append(data[i].medicine_id);
                    var m_nameTd=$("<td></td>").append(data[i].medicine_name);
                    var specifiTd=$("<td></td>").append(data[i].specification);
                    var numTd=$("<td></td>").append(data[i].num);
                    var priceTd=$("<td></td>").append(data[i].price);
                    var tr=$("<tr></tr>").append(p_idTd).append(c_idTd).append(m_idTd)
                        .append(m_nameTd).append(specifiTd).append(numTd).append(priceTd);
                    $("#allprescribe").append(tr);
                }
            }
        })
        //按病例ID查询开药记录
        $("#search").keydown(function (event) {
            if (event.keyCode === 13) {
                $.ajax({
                    url: "searchprescribe",
                    type: 'GET',
                    data: {
                        case_id: $("#search").val()
                    },
                    dataType: 'json',
                    success: function (result) {
                        $("#searchresult").empty();
                        $("#allprescribe").empty();
                        for (let i = 0; i < result.length; i++) {
                            var p_idTd=$("<td></td>").append(result[i].id);
                            var c_idTd=$("<td></td>").append(result[i].case_id);
                            var m_idTd=$("<td></td>").append(result[i].medicine_id);
                            var m_nameTd=$("<td></td>").append(result[i].medicine_name);
                            var specifiTd=$("<td></td>").append(result[i].specification);
                            var numTd=$("<td></td>").append(result[i].num);
                            var priceTd=$("<td></td>").append(result[i].price);
                            var tr=$("<tr></tr>").append(p_idTd).append(c_idTd).append(m_idTd)
                                .append(m_nameTd).append(specifiTd).append(numTd).append(priceTd);
                            $("#searchresult").append(tr);
                        }
                    }
                })
            }
        });
    })



</script>
<body>
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="/tohome" style="font-size:20px">首页</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="/case/tocase" style="font-size:20px">病例库</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="/case/toaddcase" style="font-size:20px">录入病例</a>
        </li>
        <li class="nav-item active">
            <a class="nav-link" href="toprescribe" style="font-size:20px">开药记录</a>
        </li>
    </ul>
</nav>
<form class="m-3">
    <!-- 搜索栏 -->
    <div class="form-group">
        <div class="input-group w-25 ">
            <span class="input-group-text" id="searchIcon">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                    <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"></path>
                </svg>
            </span>
            <input type="text" class="form-control" placeholder="输入病例ID搜索" id="search">
        </div>
    </div>
    <!-- 表格 -->
    <div class="form-group">
        <div class="panel-footer" style="height: 490px;overflow: auto;">
        <table class="table table-hover">
            <thead class="thead-light">
            <tr>
                <th>开药编号</th>
                <th>病例号</th>
                <th>药品号</th>
                <th>药品名称</th>
                <th>药品规格</th>
                <th>开药量</th>
                <th>单价</th>
            </tr>
            </thead>
            <!-- 显示所有开药信息 -->
            <tbody id="allprescribe">
            </tbody>
            <!-- 显示搜索结果 -->
            <tbody id="searchresult">
            </tbody>
        </table>
        </div>
    </div>
    <!-- 避免提交表单 -->
    <input type="text" id="hiddenText" name="hiddenText" style="display:none" />
</form>
</body>
</html>
